<template>
	<view class="container">
		<view class="title">问题描述</view>
		<view class="tui-cells">
			<textarea disabled class="tui-textarea" maxlength="500" placeholder-class="phcolor"
				v-model="info.message" />
		</view>
		<!-- <tui-list-cell :hover="false"> -->
		<view class="title" style="padding-top: 32rpx;">图片</view>
		<view>
			<view style="display: block;">
				<view style="width: 100%;display: flex;flex-wrap: wrap;">
					<view
						style="width: 220rpx; height: 220rpx; position: relative; margin-right: 20rpx;   margin-bottom: 20rpx;"
						v-for="(item, index) in info.image" :key="index">
						<image @click="previewImage(index)" style="width: 220rpx; height: 220rpx; display: block;" :src="item" mode="aspectFill" />
					</view>
				</view>
			</view>
		</view>
		<!-- </tui-list-cell> -->
		<view class="title top20">手机号码：{{ info.mobile }}</view>
		<view class="title top20">联系邮箱：{{ info.email }}</view>
		<view class="title top20">反馈时间：{{ info.create_time }}</view>
		<view class="title top20">状态：<text :class="info.status ? 'tui-text-green' : 'tui-text-red'">{{
			info.status ? "已处理" : "未处理" }}</text></view>
	</view>

</template>

<script>
const form = require("@/components/common/tui-validation/tui-validation.js")
export default {

	onLoad(options) {
		if (options.id) {
			this.id = options.id
			this.getInfo()
		}
	},
	data() {
		return {
			id: '',
			info: {},
			messageNum: 0
		}
	},
	methods: {
		previewImage(index) {
			let photoList = this.info.image.map(item => {
				return item;
			});
			uni.previewImage({
				current: index,
				urls: photoList
			});
		},
		getInfo: function () {
			let _this = this;
			_this.$request.get('Feedback.detail', {
				id: _this.id
			}).then(res => {
				if (res.errno == 0) {
					_this.info = res.data;
				}
			});
		},
	}
}
</script>

<style>
page {
	background: #fff;
}

.tui-text-green {
	color: green;
}

.tui-text-red {
	color: red;
}

.container {
	background-color: #fff;
	margin-top: 22rpx;
	padding: 30rpx;
	box-sizing: border-box;
	padding-bottom: 162rpx
}

.title {
	font-size: 30rpx;
	color: #666;
	padding-bottom: 32rpx;
}

.tui-cells {
	border: 1rpx solid #e6e6e6;
	border-radius: 4rpx;
	height: 280rpx;
	box-sizing: border-box;
	padding: 20rpx 20rpx 0 20rpx;
}

.tui-textarea {
	height: 210rpx;
	width: 100%;
	color: #666;
	font-size: 28rpx;
}

.pholder {
	color: #ccc;
}

.textarea-counter {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	height: 40rpx;
	line-height: 40rpx;
	padding-top: 4rpx;
}

.top64 {
	margin-top: 64rpx;
}

.tui-input {
	font-size: 30rpx;
	height: 88rpx;
	border: 1rpx solid #e6e6e6;
	border-radius: 4rpx;
	padding: 0 25rpx;
	box-sizing: border-box;
}

.tui-ptop {
	padding-top: 80rpx;
}
</style>
